<template>
	<view>
		<view class="top">
			<van-icon name="arrow-left" size="40rpx" @click="toBack" />
			<van-search class="search" use-left-icon-slot use-action-slot v-model="searchValue" @search="onSearch"
				@change="model" shape="round" placeholder="请输入产品名称">
				<view class="sousuo" slot="action" @click.stop="onSearch">搜索</view>
			</van-search>
		</view>
		<view class="box">
			<view v-if="seacrchList.length > 0">
				<view class="title">
					<text>搜索历史</text>
					<view @click="getListDel"><van-icon name="delete-o" /> 删除</view>
				</view>
				<view class="lsitembox">
					<view class="item" v-for="item in seacrchList" @click="onClick(item)">{{ item }}</view>
				</view>
			</view>
			<view style="margin-top: 60rpx;">
				<view class="title">
					<text>探索发现</text>
					<view><van-icon name="replay" /> 换一批</view>
				</view>
				<view class="fxitembox">
					<view class="item">多参数监护仪</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getSearch } from '@/api/api.js';
export default {
	data() {
		return {
			searchValue: "",
			seacrchList: [],
			show: false
		};
	},
	onLoad(option) {
		this.seacrchList = uni.getStorageSync("seacrch") || []
		// this.searchValue = option.value
	},
	methods: {
		toBack() {
			uni.navigateBack()
		},
		model(e) {
			this.searchValue = e.detail
		},
		onClick(item) {
			this.searchValue = item
			this.onSearch()
		},
		onSearch(e) {
			if (!this.searchValue) {
				return uni.showToast({
					title: "请输入内容",
					icon: "none"
				})
			}else{
				uni.reLaunch({
					url: '/pages/store/store?searchValue='+this.searchValue
				});
			}
			console.log(this.searchValue)
			getSearch({
				keyword: this.searchValue
			}).then(res => {
				console.log(res)
			})
			this.seacrchList = [this.searchValue, ...this.seacrchList]
			this.seacrchList = [...new Set(this.seacrchList)]
			uni.setStorageSync("seacrch", this.seacrchList)
		},
		getListDel() {
			uni.setStorageSync("seacrch", [])
			this.seacrchList = []
		}
	}
}
</script>

<style lang="scss">
page {
	background-color: #fff;
}

.top {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 6%;
	background-color: #fff;
	z-index: 99;
	display: flex;
	align-items: center;
	padding-left: 40rpx;
	padding-top: 10%;

	.search {
		position: relative;
		width: 60%;

		.sousuo {
			position: absolute;
			right: 0;
			top: 20%;
			height: 66rpx;
			line-height: 66rpx;
			width: 100rpx;
			color: #fff;
			text-align: center;
			border-radius: 42rpx;
			background: #FF6200;
			z-index: 10;
		}
	}
}

.box {
	margin-top: 25%;
	padding: 0 22rpx 0 40rpx;

	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;

		text {
			font-size: 30rpx;
			color: #212121;
		}

		view {
			font-size: 24rpx;
			color: #5C5C5C;

			van-icon {
				margin-right: 10rpx;
			}
		}
	}

	.lsitembox {
		display: flex;
		flex-wrap: wrap;
		margin-top: 16rpx;

		.item {
			border-radius: 18rpx;
			background: #F6F6F6;
			padding: 8rpx 10rpx;
			font-size: 24rpx;
			color: #5C5C5C;
			margin-left: 5px;
			margin-bottom: 5px;
		}
	}

	.fxitembox {
		display: flex;
		margin-top: 16rpx;

		.item {
			font-size: 26rpx;
			color: #333333;
		}
	}
}
</style>